<template>
    <el-row :gutter="12">
        <el-col :span="17">
            <el-row :gutter="12">
                <el-col :span="8">
                    <el-card shadow="hover" class="card-col">
                        <el-row class="card-col-title">总用户</el-row>
                        <count-to class="card-col-num" :startVal="0" :endVal="userCount" :duration="2600"></count-to>
                    </el-card>
                </el-col>
                <el-col :span="8">
                    <el-card shadow="hover" class="card-col">
                        <el-row class="card-col-title">总交易额</el-row>
                        <count-to class="card-col-num" :startVal="0" :endVal="tradeSum" :duration="2600"></count-to>
                    </el-card>
                </el-col>
                <el-col :span="8">
                    <el-card shadow="hover" class="card-col">
                        <el-row class="card-col-title">未读消息</el-row>
                        <count-to class="card-col-num" :startVal="0" :endVal="msgUnreadCount" :duration="2600"></count-to>
                    </el-card>
                </el-col>
            </el-row>
            <el-card shadow="never" style="margin-top:12px;">
                <el-row style="margin-bottom:24px">
                    <el-col :span="6">
                        <el-select v-model="field" size="small" @change="changeField">
                            <el-option value="user" label="累计用户数"></el-option>
                            <el-option value="trade" label="累计交易数"></el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="18" style="text-align:right">
                        <el-date-picker v-model="timeRange" type="daterange" :picker-options="pickerOptions" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" size="small" style="width:240px" @change="changeTime">
                        </el-date-picker>
                    </el-col>
                </el-row>

                <IEcharts :option="optionUser" style="height:300px;width:604px" v-if="field == 'user'"></IEcharts>
                <IEcharts :option="optionMoney" style="height:300px;width:604px" v-else></IEcharts>
            </el-card>

            <el-card shadow="never" style="margin-top:12px;">
                <el-row class="card-col-title">常用功能</el-row>
                <el-row :gutter="12">
                    <el-col :span="8" v-for="(item,index) in commonData" :key="index">
                        <el-card shadow="hover" @click.native="setHeader(item)">
                            <router-link :to="item.link" class="common-function">
                                <img :src="item.img" alt="">
                                <div style="margin-left:10px">{{item.name}}</div>
                            </router-link>
                        </el-card>
                    </el-col>
                </el-row>
            </el-card>
            <!-- <el-card shadow="never" style="margin-top:12px;">
                系统信息

                <el-row style="margin-top:6px">
                    <el-col :span="3">系统版本</el-col>
                    <el-col :span="6">{{pkg.version}}</el-col>
                </el-row>

                <el-row>
                    <el-col :span="3">授权状态</el-col>
                    <el-col :span="6">已授权</el-col>
                </el-row>

                <el-row>
                    <el-col :span="3">服务器系统</el-col>
                    <el-col :span="6">{{platformArch}}</el-col>
                </el-row>

                <el-row>
                    <el-col :span="3">当前时间</el-col>
                    <el-col :span="6">{{currentTime}}</el-col>
                </el-row>
            </el-card> -->
        </el-col>
        <el-col :span="7">
            <el-card shadow="never">
                <el-row style="margin-bottom:16px">手机查看数据</el-row>
                <el-row style="text-align:center">
                    <img src="/assets/zhushou.png" alt="" style="width:150px;height:150px;">
                </el-row>
            </el-card>
            <el-card shadow="never" style="margin-top:16px" v-if="noticeData.length">
                <el-row style="margin-bottom:16px">消息通知</el-row>
                <el-row v-for="(item,index) in noticeData" :key="index" style="font-size:14px;margin-bottom:10px;cursor:pointer">
                    <router-link :to="'/cms/article/'+item.pinyin" style="color:#666;" target="_blank">{{item.title}}</router-link>
                </el-row>
            </el-card>
            <el-card shadow="never" style="margin-top:16px" v-if="yunyingData.length">
                <el-row style="margin-bottom:16px">运营指导</el-row>
                <el-row v-for="(item,index) in yunyingData" :key="index" style="font-size:14px;margin-bottom:10px;cursor:pointer">
                    <router-link :to="'/cms/article/'+item.pinyin" style="color:#666;" target="_blank">{{item.title}}</router-link>
                </el-row>
            </el-card>
        </el-col>

    </el-row>
</template>

<script>
import CountTo from "vue-count-to";
import moment from "moment";
import pkg from "./../../package.json";

export default {
    layout(context) {
        return context.app.$cookies.get("layout");
    },
    data() {
        return {
            menu: [],
            lineChartData: {
                expectedData: [100, 120, 161, 134, 105, 160, 165],
                actualData: [120, 82, 91, 154, 162, 140, 145]
            },
            pkg,
            platformArch: "",
            currentTime: "",

            userCount: 0,
            tradeSum: 0,
            msgUnreadCount: 0,
            field: "user",
            pickerOptions: {
                shortcuts: [
                    {
                        text: "最近一周",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 7
                            );
                            picker.$emit("pick", [start, end]);
                        }
                    },
                    {
                        text: "最近一个月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 30
                            );
                            picker.$emit("pick", [start, end]);
                        }
                    },
                    {
                        text: "最近三个月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 90
                            );
                            picker.$emit("pick", [start, end]);
                        }
                    }
                ]
            },
            timeRange: [
                new Date(new Date().getTime() - 3600 * 1000 * 24 * 7),
                new Date()
            ],
            optionUser: {
                title: {
                    text: ""
                },
                tooltip: {
                    trigger: "axis"
                },
                legend: {
                    data: ["累计用户数"],
                    selected: {
                        累计用户数: true
                    }
                },
                grid: {
                    left: "4%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true
                },
                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    data: [],
                    axisLabel: {
                        interval: 0,
                        rotate: 50
                    }
                },
                yAxis: {
                    type: "value"
                },
                series: [
                    {
                        name: "累计用户数",
                        type: "line",
                        smooth: true,
                        stack: "总量",
                        data: []
                    }
                ]
            },
            optionMoney: {
                title: {
                    text: ""
                },
                tooltip: {
                    trigger: "axis"
                },
                legend: {
                    data: ["累计交易数"],
                    selected: {
                        累计交易数: true
                    }
                },
                grid: {
                    left: "4%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true
                },
                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    data: [],
                    axisLabel: {
                        interval: 0,
                        rotate: 50
                    }
                },
                yAxis: {
                    type: "value"
                },
                series: [
                    {
                        name: "累计交易数",
                        type: "line",
                        smooth: true,
                        stack: "总量",
                        data: []
                    }
                ]
            },
            noticeData: [],
            yunyingData: [],
            commonData: [
                {
                    name: "小程序信息",
                    header: "小程序信息",
                    link: "/app/wxa_info",
                    img: "/assets/wxa-info.png"
                },
                {
                    name: "微信支付",
                    header: "微信支付",
                    link: "/wxpay",
                    img: "/assets/wxpay-img.png"
                },
                {
                    name: "小程序插件",
                    header: "插件列表",
                    link: "/plugin",
                    img: "/assets/plugin-img.png"
                }
            ]
        };
    },
    components: {
        CountTo
    },
    async asyncData({ app }) {
        let data = {};
        data.platformArch = `${process.platform} ${process.arch}`;
        data.currentTime = moment().format("YYYY-MM-DD HH:mm:ss");

        const analysis = await app.$axios.$get("/api/app/home/analysis/index");
        if (analysis && analysis.errmsg === "ok") {
            data.userCount = analysis.data.userCount;
            data.tradeSum = analysis.data.tradeSum;
            data.msgUnreadCount = analysis.data.msgUnreadCount;
        }

        // const notice = await app.$axios.$get(
        //     `/api/cms/home/article/index?tag=notice&pageSize=5`
        // );
        // if (notice && notice.errmsg === "ok") {
        //     data.noticeData = notice.data.data;
        // }

        // const yunying = await app.$axios.$get(
        //     `/api/cms/home/article/index?tag=yunying&pageSize=5`
        // );
        // if (yunying && yunying.errmsg === "ok") {
        //     data.yunyingData = yunying.data.data;
        // }

        return data;
    },
    mounted() {
        this.getSummary();
    },
    methods: {
        changeField(value) {
            this.field = value;
            this.getSummary();
        },
        changeTime(value) {
            if (value) {
                this.timeRange = value;
                this.getSummary();
            }
        },
        //统计表
        async getSummary() {
            const dailySummaryLine = await this.$axios.$post(
                "/api/app/home/analysis/dailySummaryLine",
                {
                    field: this.field,
                    date: [
                        this.format(this.timeRange[0]),
                        this.format(this.timeRange[1])
                    ]
                }
            );
            if (dailySummaryLine && dailySummaryLine.errmsg === "ok") {
                if (this.field === "user") {
                    this.optionUser.xAxis.data = dailySummaryLine.data.dates;
                    this.optionUser.series[0].data = dailySummaryLine.data.data;
                } else {
                    this.optionMoney.xAxis.data = dailySummaryLine.data.dates;
                    this.optionMoney.series[0].data =
                        dailySummaryLine.data.data;
                }
            }
        },
        setHeader(item) {
            this.$cookies.set("header", item.header, {
                path: "/",
                domain: this.getCoryright(),
                maxAge: 60 * 10
            });
        }
    }
};
</script>
<style scoped>
.panel-group {
    margin-top: 18px;
}

.panel-group .card-panel-col {
    margin-bottom: 32px;
}

.panel-group .card-panel {
    height: 108px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
}

.card-panel .card-panel-icon-wrapper {
    float: left;
    margin: 14px 0 0 14px;
    padding: 16px;
    transition: all 0.38s ease-out;
    border-radius: 6px;
}

.card-panel .card-panel-icon {
    float: left;
    font-size: 48px;
}

.card-panel .card-panel-description {
    float: right;
    font-weight: bold;
    margin: 26px;
    margin-left: 0px;
}

.card-panel .card-panel-description .card-panel-text {
    line-height: 18px;
    color: rgba(0, 0, 0, 0.45);
    font-size: 16px;
    margin-bottom: 12px;
}

.card-panel .card-panel-description .card-panel-num {
    font-size: 20px;
}

.card-col {
    height: 180px;
    text-align: center;
    padding-top: 40px;
}
.card-col-title {
    margin-bottom: 8px;
}
.card-col-num {
    font-weight: 500;
    font-size: 20px;
}
.common-function {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: #222;
}
.common-function img {
    width: 50px;
    height: 50px;
}
</style>


